<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/reset.css">
  <link rel="stylesheet" href="./assets/index.css">
  <script src="./axios.js"></script>
  <script src="./request.js"></script>
  <script src="./vue.js"></script>
</head>

<body>

  <!-- 图片、iconfont、svg -->

  <div id="app" @scroll.passive="handleScroll">
    <div class="header">
      <div class="logo">
        <svg width="62" height="28" viewBox="0 0 62 28" fill="#de698c"><path id="Shape" class="cls-1" d="M57.45 25a7 7 0 0 1-.74 0c-.47-.05-.94 0-1.4-.06-.3 0-.29 0-.32-.3-.07-.88-.16-1.75-.24-2.63l-.21-2.31c-.07-.77-.15-1.41-.23-2.11s-.14-1.33-.21-2q-.14-1.25-.29-2.5l-.27-2.22Q53.29 9.21 53 7.5c-.18-1.21-.39-2.42-.61-3.62 0-.22 0-.22.18-.26a14.07 14.07 0 0 1 2.63-.25h.27a.24.24 0 0 1 .18.08.25.25 0 0 1 .06.19c0 .62.07 1.24.12 1.87.07 1 .16 2 .23 3 0 .65.09 1.31.14 2l.24 3.15c0 .64.09 1.29.14 1.94l.24 2.82c0 .6.09 1.2.15 1.8l.24 2.66c.13.73.18 1.42.24 2.12z"></path><path data-name="Shape" class="cls-1" d="M23.74 3.39h.51c.19 0 .29.08.3.32.07 1.1.13 2.19.21 3.28s.17 2.36.26 3.54.17 2.17.25 3.25.2 2.38.3 3.57l.21 2.73c.07.91.16 1.69.23 2.53l.2 2.18c0 .23 0 .24-.25.24-.66 0-1.32-.09-2-.07-.15 0-.19-.06-.22-.21-.05-.31 0-.62-.08-.93-.09-.8-.14-1.64-.22-2.47s-.15-1.49-.23-2.24-.14-1.37-.21-2.05-.15-1.34-.23-2-.14-1.24-.22-1.85c-.11-.91-.22-1.81-.34-2.72S22 8.8 21.88 8q-.24-1.69-.55-3.37c0-.25-.09-.51-.15-.76s0-.2.15-.22c.39 0 .78-.13 1.17-.17a6.83 6.83 0 0 1 1.24-.06z"></path><path id="Shape-3" data-name="Shape" class="cls-1" d="M51.39 14.31c.74 0 .76 0 .88.67s.25 1.63.35 2.45.21 1.75.3 2.62c.08.7.14 1.41.21 2.12s.16 1.47.23 2.22c0 .42.09.83.13 1.25 0 .12 0 .19-.14.2l-.76.09-1.4.14c-.24 0-.26 0-.3-.22l-1.22-6.23c-.27-1.39-.53-2.77-.8-4.14 0-.19-.07-.38-.1-.57a.16.16 0 0 1 0-.14.16.16 0 0 1 .12-.07 14.3 14.3 0 0 1 2.5-.39z"></path><path id="Shape-4" data-name="Shape" class="cls-1" d="M20.13 14.31c.8 0 .79 0 .92.71.19 1.11.32 2.22.44 3.33s.25 2.15.36 3.23c.08.74.14 1.47.21 2.22.05.52.12 1 .17 1.57a.94.94 0 0 0 0 .19c0 .26 0 .28-.25.3l-1.47.14-.55.06c-.24 0-.24 0-.29-.22-.17-.83-.33-1.66-.49-2.5l-1.18-6c-.16-.8-.29-1.61-.44-2.41 0-.15 0-.21.15-.25a14.56 14.56 0 0 1 2.43-.39z"></path><path id="Shape-5" data-name="Shape" class="cls-1" d="M30.64 22.7v3.36a.82.82 0 0 0 0 .1c0 .16 0 .24-.21.23h-2.07c-.26 0-.25 0-.27-.26l-.24-2.54c-.08-.85-.14-1.56-.21-2.34s-.16-1.6-.23-2.41c-.05-.54-.1-1.07-.14-1.61l-.18-2.09c0-.29 0-.34.29-.37a14.82 14.82 0 0 1 2.3-.07 3.18 3.18 0 0 1 .57.09c.23.06.26.09.27.33 0 .48.05 1 .06 1.45s0 1.08 0 1.61c.05 1.55.04 3.04.06 4.52z"></path><path id="Shape-6" data-name="Shape" class="cls-1" d="M61.84 22.85v3.35c0 .14-.05.19-.19.19h-1a10 10 0 0 0-1.12 0c-.25 0-.25 0-.27-.23-.1-1.11-.21-2.2-.31-3.3l-.27-3c-.09-1-.2-2.1-.3-3.14 0-.52-.09-1.05-.13-1.57 0-.23 0-.28.27-.28.46 0 .91-.1 1.37-.09a8.11 8.11 0 0 1 1.37.07c.38.07.41.09.43.5.07 1.19 0 2.39.09 3.58s.02 2.51.06 3.92z"></path><path id="Shape-7" data-name="Shape" class="cls-1" d="M50.62 8.54a4.62 4.62 0 0 1 .68.06.23.23 0 0 1 .21.23c.06.68.13 1.37.2 2.05s.12 1.11.17 1.66c0 .35 0 .36-.31.38l-.92.06c-.2 0-.27 0-.3-.24-.12-1-.25-2-.38-3.07 0-.28-.07-.57-.12-.86a.21.21 0 0 1 .19-.28z"></path><path id="Shape-8" data-name="Shape" class="cls-1" d="M19.46 8.54a3.7 3.7 0 0 1 .63 0 .21.21 0 0 1 .19.21c0 .32.08.64.11 1q.15 1.47.27 3c0 .21 0 .22-.19.23l-1.08.02c-.21 0-.24 0-.27-.23l-.27-2.17c-.09-.72-.1-1.18-.19-1.79 0-.16 0-.21.16-.24a4 4 0 0 1 .64 0z"></path><path id="Shape-9" data-name="Shape" class="cls-1" d="M30.43 11.25v1.87c0 .28 0 .28-.27.28a9.08 9.08 0 0 1-1-.05c-.22 0-.22 0-.23-.25 0-.76 0-1.52-.06-2.28V9.28c0-.28 0-.28.26-.28a7.06 7.06 0 0 1 1.14.07c.23 0 .24 0 .24.28v1.9z"></path><path id="Shape-10" data-name="Shape" class="cls-1" d="M61.65 11.27v1.87c0 .26 0 .28-.27.26s-.7 0-1 0c-.17 0-.22-.09-.21-.24V13L60 9.44v-.19C60 9 60 9 60.29 9s.68 0 1 .05.34.09.34.41q.02.91.02 1.81z"></path><path id="Shape-11" data-name="Shape" class="cls-1" d="M18.61 12.73c0 .34 0 .34-.32.42l-.68.16c-.23 0-.23 0-.27-.17l-.69-3.83c0-.28 0-.28.23-.33l1-.16c.21 0 .23 0 .27.2.08.45.16.91.22 1.36.09.72.17 1.45.26 2.17a.68.68 0 0 1-.02.18z"></path><path id="Shape-12" data-name="Shape" class="cls-1" d="M47.86 9l1.28-.21c.15 0 .2.07.22.21.07.5.16 1 .22 1.49.09.72.21 1.44.23 2.18v.22a.18.18 0 0 1 0 .14.18.18 0 0 1-.12.06l-.87.2c-.14 0-.19 0-.21-.16-.09-.51-.19-1-.27-1.52l-.44-2.5a.89.89 0 0 1-.04-.11z"></path><path id="Shape-13" data-name="Shape" class="cls-1" d="M28.32 12a9.73 9.73 0 0 1 0 1.22c0 .12-.05.2-.19.21l-.86.07c-.14 0-.18 0-.2-.18-.06-.39-.05-.79-.09-1.19-.07-.75-.1-1.5-.15-2.25v-.55a.13.13 0 0 1 0-.12.13.13 0 0 1 .12 0c.37 0 .74-.08 1.11-.07.22 0 .24 0 .25.24v.45c-.03.67-.01 1.43.01 2.17z"></path><path id="Shape-14" data-name="Shape" class="cls-1" d="M59.53 11.52v1.55c0 .28 0 .29-.29.32l-.76.07c-.14 0-.21 0-.22-.19 0-.69-.09-1.37-.13-2.06S58 10.08 58 9.51v-.19c0-.11 0-.18.16-.19.36 0 .72-.08 1.08-.07s.22 0 .24.24c.05.7.05 1.48.05 2.22z"></path><path id="Shape-15" data-name="Shape" class="cls-1" d="M17.54 20.75a3.69 3.69 0 0 0-.47-.44 8.21 8.21 0 0 0-1.62-1 18.27 18.27 0 0 0-3.59-1.21 18.68 18.68 0 0 0-4.3-.52 10.55 10.55 0 0 0-1.4.11c-.24 0-.25 0-.27-.19-.1-1.07-.22-2.14-.31-3.21s-.19-2.15-.25-3.29c-.08-1.39-.16-2.77-.19-4.16V2.09a2.54 2.54 0 0 1 0-.35V.42c0-.17 0-.21-.21-.17a3.67 3.67 0 0 0-.73.22L.43 2.08c-.13.06-.18.11-.15.26.24 1.12.46 2.23.65 3.36q.36 2.06.67 4.13c.13.83.25 1.68.36 2.52s.23 1.75.34 2.62.19 1.58.27 2.37.2 1.7.3 2.56.14 1.46.21 2.18c.1 1 .21 2 .3 3s.14 1.74.21 2.6c0 .24.05.28.29.28H5.85a28.93 28.93 0 0 0 3.75-.46 17.26 17.26 0 0 0 4.91-1.68A9 9 0 0 0 17 24a3.59 3.59 0 0 0 .91-1.56 1.73 1.73 0 0 0-.37-1.69zm-8.78 4.52c-.21-1.58-.43-3.15-.65-4.78a44 44 0 0 1 4.63 1.71 27.84 27.84 0 0 1-4 3.07z"></path><path id="Shape-16" data-name="Shape" class="cls-1" d="M48.52 20.5a7 7 0 0 0-1.3-.88A16.07 16.07 0 0 0 44 18.36a19.59 19.59 0 0 0-5.07-.75 10 10 0 0 0-1.46.11c-.27 0-.29 0-.32-.24-.06-.5-.11-1-.16-1.51-.09-.92-.18-1.84-.25-2.77-.1-1.28-.19-2.55-.26-3.83 0-1-.1-1.94-.09-2.9v-.61q-.06-1.21 0-2.42c0-1 0-2 .09-3 0-.18 0-.21-.2-.19a2.25 2.25 0 0 0-.55.16c-1.37.5-2.67 1.12-4 1.64a.19.19 0 0 0-.14.28 1.75 1.75 0 0 1 0 .19c.3 1.43.57 2.86.8 4.31.16 1 .33 2 .49 3 .12.78.22 1.57.33 2.36s.19 1.47.27 2.22.2 1.58.29 2.36.15 1.3.22 1.94.16 1.39.23 2.08.14 1.48.21 2.22.16 1.61.23 2.41.13 1.52.19 2.28c0 .17.1.22.25.22h.76a12 12 0 0 0 1.82-.07c1-.09 2-.24 3.06-.42A17.36 17.36 0 0 0 46 25.64a8.24 8.24 0 0 0 2.26-1.75 3.49 3.49 0 0 0 .82-1.57 1.74 1.74 0 0 0-.56-1.82zm-4.66 1.86a5.19 5.19 0 0 1-.5.44c-1 .83-2.13 1.61-3.21 2.39a.18.18 0 0 1-.17.05l-.63-4.7a.4.4 0 0 1 .34 0c1.19.37 2.35.83 3.51 1.28l.64.28c.1.06.12.12 0 .21z"></path></svg>
      </div>
      <div class="search-input">
        <svg width="12" height="18" viewBox="0 0 1024 1024"><path d="M448 128c176 0 320 144 320 320 0 73.6-25.6 147.2-73.6 204.8l-19.2 22.4-22.4 19.2C595.2 742.4 521.6 768 448 768 272 768 128 624 128 448S272 128 448 128m0-64C236.8 64 64 236.8 64 448s172.8 384 384 384c92.8 0 179.2-35.2 246.4-89.6l211.2 208c6.4 6.4 12.8 9.6 22.4 9.6s16-3.2 22.4-9.6c12.8-16 12.8-35.2 0-48l-208-208c54.4-67.2 89.6-153.6 89.6-246.4 0-211.2-172.8-384-384-384z" fill="#aaa"></path></svg>
        <span>北冥有鱼，化而为鹏梵蒂冈连快递费过来付款定金</span>
      </div>
      <div class="avatar">
          <svg width="24" height="24" viewBox="0 0 80 80"><path fill="#e7e7e7" d="M0 0h80v80H0z"></path><path d="M45.78 57.73h2.29a73.4 73.4 0 0 1 4.23 9.5 57.14 57.14 0 0 1 2.62 10.5 50.58 50.58 0 0 1-29.86 0 57.14 57.14 0 0 1 2.62-10.5 73.4 73.4 0 0 1 4.23-9.5h2.29l2.67 7.21 2.41-7.21h1.42l2.41 7.21zM31.72 18.51l4.87 4.87a1.8 1.8 0 0 1 0 2.55 1.8 1.8 0 0 1-2.55 0l-4.87-4.87a1.8 1.8 0 0 1 0-2.55 1.8 1.8 0 0 1 2.55 0zM48.57 18.51a1.8 1.8 0 0 1 2.55 0 1.8 1.8 0 0 1 0 2.55l-4.87 4.87a1.8 1.8 0 0 1-2.55 0 1.8 1.8 0 0 1 0-2.55z" fill="#ccc"></path><path d="M24.2 24.22h31.6a7.2 7.2 0 0 1 7.2 7.2v20.12a7.2 7.2 0 0 1-7.2 7.2H24.2a7.2 7.2 0 0 1-7.2-7.2V31.42a7.2 7.2 0 0 1 7.2-7.2zm1 4a4.24 4.24 0 0 0-4.2 4.29v17.94a4.24 4.24 0 0 0 4.21 4.27h29.5A4.24 4.24 0 0 0 59 50.45V32.51a4.24 4.24 0 0 0-4.21-4.27z" fill="#ccc"></path><path d="M25.88 29.84h28.24a3.22 3.22 0 0 1 3.22 3.21v16.86a3.22 3.22 0 0 1-3.22 3.21H25.88a3.22 3.22 0 0 1-3.22-3.21V33.05a3.22 3.22 0 0 1 3.22-3.21zm0 .8a2.42 2.42 0 0 0-2.42 2.41v16.86a2.42 2.42 0 0 0 2.42 2.41h28.24a2.42 2.42 0 0 0 2.42-2.41V33.05a2.42 2.42 0 0 0-2.42-2.41z" fill="#ccc"></path><path d="M26.73 40.1l7-3.1a1.81 1.81 0 1 1 1.48 3.3l-7 3.1a1.81 1.81 0 1 1-1.48-3.3zM53.27 40.1a1.81 1.81 0 1 1-1.48 3.3l-7-3.1a1.81 1.81 0 1 1 1.48-3.3zM37.58 47.9c-1 0-1.9-.7-2.7-2a.8.8 0 0 1 .26-1.11.81.81 0 0 1 1.11.26c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.37 0c.54.86 1 1.23 1.33 1.23s.79-.37 1.33-1.23a.81.81 0 0 1 1.11-.26.8.8 0 0 1 .26 1.11c-.8 1.28-1.69 2-2.7 2a2.71 2.71 0 0 1-2-1.06 2.71 2.71 0 0 1-2.03 1.06z" fill="#ccc"></path></svg>
      </div>
      <div class="download-app">下载App</div>
    </div>

    <!-- 导航区域 -->
    <template
      v-if="navList.length"
    >
      <div 
        v-for="navIndex in 2"
        :key="navIndex"
        :class="{
          'nav-box': navIndex === 1,
          'hide-nav-box': navIndex === 2,
          hide: navIndex === 2 && navHide
        }"
      >
        <ul class="nav-list">
          <li 
            @click="handleNavClick(index)"
            class="nav"
            :class="{
              big: nav.title.length === 3 && navIndex === 2,
              active: index === navActiveIndex
            }"
            v-for="(nav, index) in navList"
            :key="nav.id"
          >{{ nav.title }}</li>
        </ul>
        <div 
          class="down" 
          v-if="navIndex === 1"
          @click="handleClick"
        >
          <svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M515.2 649.6L169.6 304c-12.8-12.8-32-12.8-44.8 0s-12.8 35.2 0 48l368 364.8c12.8 12.8 32 12.8 44.8 0l361.6-361.6c12.8-12.8 12.8-35.2 0-48s-32-12.8-44.8 0L515.2 649.6z" fill="#ccc"></path></svg>
        </div>
        <div 
          v-else
          class="up" 
          @click="handleClick"
        >
          <svg width="16" height="32" viewBox="0 0 1024 1024"><path d="M854.4 713.6c12.8 12.8 32 12.8 44.8 0s12.8-35.2 0-48L537.6 304c-12.8-12.8-32-12.8-44.8 0L124.8 672c-12.8 12.8-12.8 35.2 0 48s32 12.8 44.8 0l345.6-342.4 339.2 336z" fill="#ccc"></path></svg>
        </div>
      </div>
    </template>
    
    <!-- 轮播图区域 -->
    <div 
      v-if="bannerList.length"
      class="banner-box"
    >
      <ul 
        class="banner-list"
        :style="bannerStyle"
        @transitionend="handleTransitionEnd"
      >
        <li 
          class="banner"
          v-for="banner in bannerList"
          :key="banner.id"
        >
          <img 
            class="poster"
            :src="banner.poster" 
            :alt="banner.title"
          />
        </li>
      </ul>
      <ul class="index-list">
        <li 
          v-for="index in bannerList.length - 1"
          :key="index"
          class="index"
          :class="{
            active: index - 1 === bannerActiveIndex % 3
          }"
        ></li>
      </ul>
    </div>

    <!-- 视频列表区域 -->
    <div 
      v-if="videoList.length"
      class="video-box"
    >
      <ul class="video-list">
        <li
          v-for="video in videoList " 
          :key="video.id"
          class="video"
        >
          <div class="poster">
            <img 
              :src="video.poster" 
              :alt="video.title"
            />
            <div class="info">
              <div class="play">
                <svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M684.8 483.2l-256-112c-22.4-9.6-44.8 6.4-44.8 28.8v224c0 22.4 22.4 38.4 44.8 28.8l256-112c25.6-9.6 25.6-48 0-57.6z"></path></svg>
                {{ video.play }}
              </div>
              <div 
                v-if="video.rank"
                class="rank"
              >
                <svg viewBox="0 0 1024 1024"><path d="M800 128H224C134.4 128 64 198.4 64 288v448c0 89.6 70.4 160 160 160h576c89.6 0 160-70.4 160-160V288c0-89.6-70.4-160-160-160z m96 608c0 54.4-41.6 96-96 96H224c-54.4 0-96-41.6-96-96V288c0-54.4 41.6-96 96-96h576c54.4 0 96 41.6 96 96v448z"></path><path d="M240 384h64v64h-64zM368 384h384v64h-384zM432 576h352v64h-352zM304 576h64v64h-64z"></path></svg>
                {{ video.rank }}
              </div>
            </div>
          </div>
          <div class="title">{{ video.title }}</div>
        </li>
      </ul>
    </div>

    <!-- 底部区域 -->
    <div class="footer">
      <p>哔哩哔哩 沪ICP备13002172号-3</p>
      <p>信息网络传播视听节目许可证：0910417</p>
    </div>
  </div>

  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        navList: [],
        navHide: true,
        navActiveIndex: 0,
        bannerList: [],
        bannerWidth: 350,
        bannerStyle: {
          left: 0,
          transition: 'left .3s',
        },
        bannerActiveIndex: 0,
        videoOldList: [],
        videoOldList: [],
        videoGettingData: false,
        videoCount: 0,
      },
      computed: {
        videoList () {
          return this.videoOldList.map(video => {
            video.play = video.play > 10000 ? video.play / 10000 + '万' : video.play;
            video.rank = video.rank > 10000 ? video.rank / 10000 + '万' : video.rank;
            return video;
          })
        }
      },
      methods: {
        handleClick () {
          this.navHide = !this.navHide;
        },
        handleNavClick (index) {
          this.navActiveIndex = index;
        },
        autoMove () {
          setTimeout(() => {
            if(this.bannerActiveIndex === 0 ) {
              this.bannerStyle.transition = 'left .3s';
            }

            this.bannerActiveIndex ++;
            this.bannerStyle.left = -this.bannerActiveIndex * this.bannerWidth + 'px';
          }, 1500)
        },
        handleTransitionEnd () {
          if(this.bannerActiveIndex === 3) {
            this.bannerActiveIndex = 0;
            this.bannerStyle.left = 0;
            this.bannerStyle.transition = 'none';
          }
          this.autoMove();
        },
        handleScroll (e) {
          const { scrollHeight, offsetHeight, scrollTop } = e.target;
          const toBottomHeight = scrollHeight - offsetHeight - scrollTop;
          const videoLength = this.videoList.length;

          if(videoLength === this.videoCount) { return; } 

          if(toBottomHeight < 200 && !this.videoGettingData) {
            this.videoGettingData = true;

            axios.get('video', {
              params: {
                start: this.videoList.length,
                offset: 12
              }
            }).then(res => {
                this.videoOldList.push(...res.data);
                this.videoGettingData = false;
            })

          }
        },
        getData () {
          axios.all([
            axios.get('nav'),
            axios.get('banner'),
            axios.get('video', {
              params: {
                start: 0,
                offset: 12
              }
            })
          ]).then(axios.spread((navRes, bannerRes, videoRes) => {
            this.initNavList(navRes);
            this.initBannerList(bannerRes);
            this.initVideo(videoRes);
          }));
        },
        initNavList (navRes) {
          this.navList = navRes;
        },
        initBannerList (bannerRes) {
          const bannerLaseEle = {...bannerRes[0]};
          bannerLaseEle.id = Math.floor(Math.random() * 10000000);
          this.bannerList = [...bannerRes, bannerLaseEle];
        },
        initVideo (videoRes) {
          this.videoCount = videoRes.count;
          this.videoOldList = videoRes.data;
        }
      },
      created () {
        this.getData();
      },
      mounted () {
        this.autoMove();
      }
    })
  </script>
</body>

</html>